<!-- 园区详情 -->
<template>
    <div class="industrialParkDetail">
        <div class="item">
            <div class="label">注册园区</div>
            <div class="data">{{industrialDetail.industrialParkName}}</div>
        </div>
        <div class="item">
            <div class="label">开票限额</div>
            <div class="data">{{industrialDetail.quota}}</div>
        </div>
        <div class="item">
            <div class="label">注册行业</div>
            <div class="data">{{industrialDetail.industry}}</div>
        </div>
        <div class="item">
            <div class="label">核定税种</div>
            <div class="data">
                <div>{{industrialDetail.taxCategory}}</div>
                <div class="desc">(以税务局核定为准)</div>
            </div>
        </div>
        <div class="item">
            <div class="label">开票类目</div>
            <div class="data">
                <div v-if="industrialDetail.invoicingCategory != null" v-html="industrialDetail.invoicingCategory.replace(/(\n|\r|\r\n|↵)/g, '<br/>')"></div>
                <div @click="showReceiptExample" class="flex alignCenter" style="margin: 5px 0">
                    <img class="fpylIcon" :src="assetsAddress + '/employed/fpylIcon.png'" mode=""/>
                    <div>发票样例</div>
                </div>
                <div class="desc">(以税务局核定为准)</div>
            </div>
        </div>
        <div class="item">
            <div class="label">经营范围</div>
            <div class="data">
                <div v-if="industrialDetail.businessScope != null" v-html="industrialDetail.businessScope.replace(/(\n|\r|\r\n|↵)/g, '<br/>')"></div>
            </div>
        </div>
        <div class="item">
            <div class="label">名称示例</div>
            <div class="data">{{industrialDetail.nameExample}}</div>
        </div>
        <div class="btm" v-if="isAdd == '1'">
            <van-button @click="apply" type="primary" block>下一步</van-button>
        </div>
    </div>

    <van-overlay :show="show" @click="show = false">
        <div class="flex center">
            <img class="exampleImg" :src="industrialDetail.receiptExample" alt="">
        </div>
    </van-overlay>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Button , Overlay } from 'vant';
export default {
    components: {
        [Button.name]: Button,
        [Overlay.name]: Overlay,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const params = proxy.$route.params;
        const laborCompanyId = JSON.parse(params.laborCompanyId);
        const industry = JSON.parse(decodeURIComponent(params.industry));
        const isAdd = params.isAdd;

        const assetsAddress = proxy.assetsAddress;

        // 获取园区详情
        const industrialDetail = ref({
            'invoicingCategory': '',
            'businessScope': '',
        });
        const getDetail = () => {
            proxy.$http.industrialApi.industrialParkPolicyDetail({laborCompanyId: laborCompanyId,industry: industry})
            .then(res => {
                if(res.success){
                    industrialDetail.value = JSON.parse(JSON.stringify(res.data))
                }else{
                    proxy.showToast({message: res.errMessage});
                }
            })
        }
        getDetail();

        const show = ref(false);
        const showReceiptExample = () =>{
            show.value = true;
        }

        // 确认
        const apply = () => {
            proxy.$router.push({name: 'addIndividualBusiness',params: {'laborCompanyId': JSON.stringify(laborCompanyId),'industry': encodeURIComponent(JSON.stringify(industry)),'isAdd': '1'}})
        }

        return {
            assetsAddress,
            isAdd,
            industrialDetail,
            showReceiptExample,
            show,
            apply,
        }
    }
}

</script>
<style scoped>
.industrialParkDetail{
    padding-bottom: 90px;
    min-height: 100vh;
    box-sizing: border-box;
    background: #FFFFFF;
}
.item{
    padding: 12px 0;
    margin: 0 12px;
    border-bottom: 1px solid #F3F5F7;
    display: flex;
}
.label{
    font-size: 13px;
    font-weight: 500;
    width: 80px;
}
.data{
    font-size: 13px;
    color: #333333;
    width: 265px;
    white-space: normal!important;
}
.desc{
    font-size: 11px;
    color: #999999;
}
.fpylIcon{
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
.exampleImg{
    width: 100%;
}

.btm{
    position: fixed;
    background: #F5F5F5;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
}
</style>